<template>
    <div class="api-content">
        <div class="api-content-box">
            <div class="titleBox">
                <el-select v-model="contentValue.newValue.status" @input="checkChangeValue" class="api-state-change"
                    :class="stateNumArray[contentValue.newValue.status]" placeholder="请选择"
                    :popper-class="theme + ' api-state-change-option'">
                    <el-option v-for="item in stateArray" :class="stateNumArray[item.value]" :key="item.value"
                        :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <div class="api-title-box">
                    <input class="title" type="text" placeholder="请输入标题" @input="checkChangeValue"
                        v-model="contentValue.newValue.title">
                </div>
            </div>
            <div class="textarea-box">
                <el-input type="textarea" resize="none" @input="checkChangeValue" :autosize="{ minRows: 3, maxRows: 3}"
                    show-word-limit maxlength="200" placeholder="备注" v-model="contentValue.newValue.description">
                </el-input>
            </div>
            <div class="main-line">
                <el-input placeholder="输入访问地址" @input="checkChangeValue" v-model="contentValue.newValue.url"
                    class="input-with-select">
                    <div slot="prepend">
                        <el-dropdown @command="changeSelect" class="content-type">
                            <el-button>
                                <span class="type"
                                    :class="contentValue.newValue.type">{{contentValue.newValue.type.toLocaleUpperCase()}}</span>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown" :class="theme">
                                <el-dropdown-item command="get"><span class="type GET">GET</span></el-dropdown-item>
                                <el-dropdown-item command="post"><span class="type POST">POST</span></el-dropdown-item>
                                <el-dropdown-item command="put"><span class="type PUT">PUT</span></el-dropdown-item>
                                <el-dropdown-item command="del"><span class="type DEL">DEL</span></el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        &nbsp; &nbsp; &nbsp; &nbsp;
                        <el-dropdown class="ipBox" @command="IPSelect" trigger="click">
                            <el-button>
                                <span class="ip">{{IP}}</span>
                                <i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown" :class="theme">
                                <el-dropdown-item v-for="(item, index) in urlArray" :key="index" :command="index">
                                    <span class="ip">{{item.str}}</span>
                                </el-dropdown-item>
                                <el-dropdown-item command="setting"><span class="ip">管理IP地址</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="sendButton" slot="append" @click="send">
                        <span>SEND</span>
                        <el-dropdown class="otherOption" @command="optionSelect" trigger="click" style="color: #FFF">
                            <el-button @click.stop>
                                <i class=" el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown" :class="theme">
                                <el-dropdown-item command="Save"><span class="get">保存</span>
                                </el-dropdown-item>
                                <el-dropdown-item command="Restore"><span class="post">还原</span>
                                </el-dropdown-item>
                                <el-dropdown-item command="Delete"><span class="del">删除</span>
                                </el-dropdown-item>
                                <el-dropdown-item command="SaveAs"><span class="put">另存为</span>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-input>
            </div>
            <reqBox ref="headerBox" :newValue="contentValue.newValue" :checkChangeValue="checkChangeValue"></reqBox>
            <div class="ResponseBox">
                <div class="Response-title">
                    <span>Response</span>
                    <div class="resOptions">
                        Status:{{resOptions.Status}} &nbsp; Time:{{resOptions.Time}} ms &nbsp; Size:{{resOptions.Size}}
                    </div>
                </div>
                <div class="Response-content">
                    <transition name="el-fade-in">
                        <div class="cancel-mark" v-if="showCancelSend">
                            <el-button type="info" @click="cancelSend">取消发送</el-button>
                        </div>
                    </transition>
                    <textarea ref="Response"></textarea>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    let CodeMirror = require("codemirror/lib/codemirror");
    import "codemirror/lib/codemirror.css";
    import "codemirror/theme/mdn-like.css";
    import "codemirror/mode/javascript/javascript.js";
    import "codemirror/addon/fold/foldgutter.css";
    import "codemirror/addon/fold/foldcode.js";
    import "codemirror/addon/fold/foldgutter.js";
    import "codemirror/addon/fold/brace-fold.js";
    import "codemirror/addon/fold/comment-fold.js";
    import "codemirror/addon/edit/matchbrackets";
    import 'codemirror/addon/hint/javascript-hint'
    import 'codemirror/addon/hint/show-hint'
    import 'codemirror/keymap/sublime.js'
    import 'codemirror/keymap/emacs.js'
    import 'codemirror/keymap/vim.js'


    import reqBox from './reqBox';
    import { mapState } from 'vuex';

    export default {
        components: {
            reqBox
        },
        computed: {
            ...mapState("Tree", {
                folderObject: state => state.folderObject,
            }),
            ...mapState("url", {
                urlArray: state => state.urlArray,
            }),
            ...mapState("theme", {
                theme: state => state.theme,
            }),
        },
        props: ['contentValue'],
        mounted() {
            this.Response = CodeMirror.fromTextArea(this.$refs.Response, {
                mode: 'text/javascript',
                indentWithTabs: true,
                smartIndent: false,
                lineNumbers: true,
                lineWrapping: true,
                foldGutter: true,
                readOnly: true,
                matchBrackets: true,
                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                theme: 'mdn-like',
            });
        },
        data() {
            return {
                showCancelSend: false,
                Response: null,
                resOptions: {
                    Status: '--',
                    Time: '--',
                    Size: '--'
                },
                IP: 'http://www.baidu.com',
                showHeader: false,
                stateNumArray: ['preparation', 'underway', 'BUG', 'complete', 'deprecated'],
                stateArray: [
                    { value: 0, label: '设计中' },
                    { value: 1, label: '进行中' },
                    { value: 2, label: '异常' },
                    { value: 3, label: '已完成' },
                    { value: 4, label: '已废弃' }
                ],
            }
        },
        methods: {
            checkChangeValue() {
                var checkArray = ['title', 'status', 'bodyType', 'description', 'type', 'url', 'header', 'body', 'fromdata', 'query', 'rest', 'before', 'after'];
                var isChange = false;
                if (this.contentValue.id) {
                    for (let i = 0; i < checkArray.length; i++) {
                        const element = checkArray[i];
                        if (this.contentValue.newValue[element] != this.contentValue.oldValue[element]) {
                            isChange = true;
                            break;
                        };
                    };
                    this.contentValue.isChange = isChange;
                } else {
                    this.contentValue.isChange = true;
                };
            },
            IPSelect(str) {
                if (str == 'setting') {
                    this.$store.dispatch('customKey/showCustomDrawer', {
                        activeObj: null,
                        type: 'url'
                    });
                } else {
                    this.IP = this.urlArray[str].str;
                };
            },
            changeSelect(type) {
                this.contentValue.newValue.type = type;
                this.checkChangeValue();
            },
            send() {
                this.showCancelSend = true;
            },
            cancelSend() {
                this.showCancelSend = false;
            },
            optionSelect(str) {
                if (str == 'Restore') {
                    var checkArray = ['title', 'status', 'description', 'type', 'url', 'header', 'body', 'fromdata', 'query', 'rest', 'before', 'after'];
                    for (let i = 0; i < checkArray.length; i++) {
                        const element = checkArray[i];
                        this.contentValue.newValue[element] = this.contentValue.oldValue[element];
                    };
                    this.checkChangeValue();
                } else if (str == 'Delete') {
                    this.$confirm('是否删除接口？', '警告', {
                        customClass: this.theme
                    }).then(_ => {
                        this.$store.dispatch('cache/deleteCacheKey', {
                            key: key
                        });
                    }).catch(_ => { });
                } else if (str == 'SaveAs') {
                    this.$store.dispatch('Tree/getTree', folderList => {
                        this.$store.dispatch('saveFolder/setFolderObject', {
                            folderList: folderList,
                            apiObject: this,
                            type: 'saveAsEvent'
                        });
                        this.$store.dispatch('saveFolder/changeFolderStatus', true);
                    })
                } else if (str == 'Save') {
                    if (this.contentValue.id) {
                        this.saveEvent();
                    } else {
                        this.$store.dispatch('Tree/getTree', folderList => {
                            this.$store.dispatch('saveFolder/setFolderObject', {
                                folderList: folderList,
                                apiObject: this,
                                type: 'saveEvent'
                            });
                            this.$store.dispatch('saveFolder/changeFolderStatus', true);
                        })
                    };
                };
            },
            saveEvent(folderId) {
                if (!folderId && this.contentValue.isChange) {
                    console.log('UploadApi');
                } else if (folderId && this.contentValue.isChange) {
                    console.log('CreatApi');
                };
            },
            saveAsEvent(folderId) {
                console.log(folderId);
            },
        },
    }

</script>